<script setup lang="ts">
  import { computed, PropType, ref, watch } from 'vue'
  import pdfImg from '@/assets/image/pdf.png'
  import videoImg from '@/assets/image/pages/order/new/video.png'
  import VideoPreview from '@/views/return-factory/repair/form/components/custom-info/VideoPreview.vue'
  import PdfPreview from '@/views/return-factory/repair/form/components/custom-info/PdfPreview.vue'

  const props = defineProps({
    returnFactoryInfo: {
      type: Object as PropType<{
        no: string
        createTime: string
        source: 1 | 2 | 3 | 4
        customerService: string
        faultType: string
        desc: string
        imgList: Array<string>
        enableNetwork: boolean
        network: string
      }>,
      default: () => {
        return {
          no: '',
          createTime: '',
          source: '',
          customerService: '',
          faultType: '',
          desc: '',
          imgList: [],
          enableNetwork: false,
          network: '',
        }
      },
    },
    customFieldList: {
      type: Array as PropType<Array<ReturnFactoryDetailCustomField>>,
      default: () => {
        return []
      },
    },
  })

  // 获取返厂来源显示文本
  const getSourceTxt = computed(() => {
    if (props.returnFactoryInfo.source === 1) {
      return '系统创建'
    }

    if (props.returnFactoryInfo.source === 2) {
      return '工单生成'
    }

    if (props.returnFactoryInfo.source === 3) {
      return '公司移动端生成'
    }

    if (props.returnFactoryInfo.source === 4) {
      return '网点移动端生成'
    }

    return ''
  })

  // 返厂图片容器div
  const pictureContentDiv = ref<HTMLDivElement | null>(null)

  // 返厂图片切换类型：prev（上一页），next（下一页）
  // const pictureSwitchType = ref<'prev' | 'next'>('prev')

  // 自定义字段文件列表容器div集合
  const customFiledFileContentDivs = ref<Array<HTMLDivElement> | null>([])

  // 自定义字段文件切换类型：prev（上一页），next（下一页）
  const customFieldFileSwitchTypes = ref<Array<'prev' | 'next'>>([])

  // pdf预览链接列表
  const pdfPreviewList = ref<Array<string>>([])

  // 当前预览的pdf的索引
  const currentPdfPreviewIndex = ref(0)

  // pdf预览弹窗显示状态
  const pdfPreviewDialogVisible = ref(false)

  // 视频预览链接列表
  const videoPreviewList = ref<Array<string>>([])

  // 当前正在预览的视频的索引
  const currentVideoPreviewIndex = ref(0)

  // 视频预览弹窗显示状态
  const videoPreviewDialogVisible = ref(false)

  /**
   * pdf预览事件
   * @param {Number} index - 正在预览的索引
   * @param {Array<string>} previewList - 预览链接列表
   */
  const handlePdfPreview = (index: number, previewList: Array<string>) => {
    currentPdfPreviewIndex.value = index
    pdfPreviewList.value = previewList
    pdfPreviewDialogVisible.value = true
  }

  /**
   * 视频预览事件
   * @param {Number} index - 正在预览的索引
   * @param {Array<string>} previewList - 预览链接列表
   */
  const handleVideoPreview = (index: number, previewList: Array<string>) => {
    currentVideoPreviewIndex.value = index
    videoPreviewList.value = previewList
    videoPreviewDialogVisible.value = true
  }

  /**
   * 返厂图片切换按钮点击事件
   */
  // const onPictureSwitchClick = (type: 'next' | 'prev') => {
  //   pictureSwitchType.value = type
  //   if (pictureContentDiv.value) {
  //     if (type === 'next') {
  //       pictureContentDiv.value.style.transform = `translateX(-50%)`
  //       return
  //     }

  //     pictureContentDiv.value.style.transform = `translateX(0)`
  //   }
  // }

  /**
   * 自定义字段文件列表切换按钮点击事件
   * @param {Number} index - 容器索引
   * @param {('prev' | 'next')} type - 切换类型：prev（上一页），next（下一页）
   */
  const onCustomFieldFileSwitchClick = (index: number, type: 'prev' | 'next') => {
    customFieldFileSwitchTypes.value[index] = type
    if (pictureContentDiv.value && customFiledFileContentDivs.value) {
      if (type === 'next') {
        customFiledFileContentDivs.value[index].style.transform = `translateX(-50%)`
        return
      }

      customFiledFileContentDivs.value[index].style.transform = `translateX(0)`
    }
  }

  watch(
    customFiledFileContentDivs,
    (value) => {
      if (value) {
        customFieldFileSwitchTypes.value = value.map(() => 'prev')
      }
    },
    { deep: true, immediate: true },
  )
</script>

<template>
  <div class="return-factory-detail-info">
    <div class="title">返厂信息</div>
    <div class="info-list">
      <div class="info-item">
        <div class="label">
          <div class="text">返厂单号</div>
          <div class="divider">:</div>
        </div>
        <div class="value">
          {{ props.returnFactoryInfo.no }}
        </div>
      </div>
      <div class="info-item">
        <div class="label">
          <div class="text">报单时间</div>
          <div class="divider">:</div>
        </div>
        <div class="value">{{ props.returnFactoryInfo.createTime }}</div>
      </div>
      <div class="info-item">
        <div class="label">
          <div class="text">返厂来源</div>
          <div class="divider">:</div>
        </div>
        <div class="value">{{ getSourceTxt }}</div>
      </div>
      <div class="info-item">
        <div class="label">
          <div class="text">客服人员</div>
          <div class="divider">:</div>
        </div>
        <div class="value">
          {{ props.returnFactoryInfo.customerService }}
        </div>
      </div>
      <div class="info-item">
        <div class="label">
          <div class="text">故障类型</div>
          <div class="divider">:</div>
        </div>
        <div class="value">
          {{ props.returnFactoryInfo.faultType }}
        </div>
      </div>
      <!-- <div class="info-item">
        <div class="label">
          <div class="text">返厂产品问题</div>
          <div class="divider">:</div>
        </div>
        <div class="value">
          <h-tooltip-text
            :text="props.returnFactoryInfo.desc"
            :max-width="164"
            :height="18"
          ></h-tooltip-text>
        </div>
      </div> -->
      <div v-if="props.returnFactoryInfo.enableNetwork" class="info-item">
        <div class="label">
          <div class="text">服务网点</div>
          <div class="divider">:</div>
        </div>
        <div class="value">
          {{ props.returnFactoryInfo.network }}
        </div>
      </div>
      <div
        v-for="(field, index) in props.customFieldList.filter(
          (item) => ![5, 6, 7, 8].includes(item.type),
        )"
        :key="index"
        class="info-item"
      >
        <div class="label">
          <h-tooltip-text :text="field.name" text-align="right" :max-width="83" :height="18" />
          <div class="divider">:</div>
        </div>
        <div class="value">
          <h-tooltip-text :text="field.val.join('、')" :max-width="120" :height="18" />
        </div>
      </div>

      <div
        v-for="(field, index) in props.customFieldList.filter((item) => item.type === 8)"
        :key="index"
        class="info-item"
      >
        <div class="label">
          <h-tooltip-text :text="field.name" :max-width="83" :height="18" />
          <div class="divider">:</div>
        </div>
        <div class="value">
          <el-rate
            disabled
            style="height: 18px"
            :model-value="Number(field.val[0] || 0) / 2 || 0"
          />
        </div>
      </div>
    </div>
    <div class="file-list-wrapper">
      <!-- <div class="info-item">
        <div class="label">
          <div class="text">附件图片</div>
          <div class="divider">:</div>
        </div>
        <div
          class="file-list-container"
          :style="{ width: props.returnFactoryInfo.imgList.length === 0 ? '164px' : '489px' }"
        >
          <h-plain-button
            v-if="props.returnFactoryInfo.imgList.length >= 6"
            :height="50"
            :width="24"
            :padding-lr="1"
            :disabled="pictureSwitchType === 'prev'"
            @click="onPictureSwitchClick('prev')"
          >
            <i class="iconfont icon-arrow-left"></i>
          </h-plain-button>
          <div class="file-list">
            <div ref="pictureContentDiv" class="content">
              <h-image
                v-for="(img, index) in props.returnFactoryInfo.imgList"
                :key="img"
                :src="img"
                :preview-src-list="props.returnFactoryInfo.imgList"
                :padding="2"
                :show-del-btn="false"
                :width="80"
                :height="50"
                :initial-index="index"
              ></h-image>
            </div>
          </div>
          <h-plain-button
            v-if="props.returnFactoryInfo.imgList.length >= 6"
            :height="50"
            :width="24"
            :padding-lr="1"
            :disabled="pictureSwitchType === 'next'"
            @click="onPictureSwitchClick('next')"
          >
            <i class="iconfont icon-arrow-right"></i>
          </h-plain-button>
        </div>
      </div> -->
      <div
        v-for="(field, index) in props.customFieldList.filter((item) =>
          [5, 6, 7].includes(item.type),
        )"
        :key="index"
        class="info-item"
      >
        <div class="label">
          <h-tooltip-text :text="field.name" :max-width="53" :height="16" />
          <div class="divider">:</div>
        </div>
        <div
          class="file-list-container"
          :style="{ width: field.val.length === 0 ? '164px' : '489px' }"
        >
          <h-plain-button
            v-if="field.val.length >= 6"
            :height="50"
            :width="24"
            :padding-lr="1"
            :disabled="customFieldFileSwitchTypes[index] === 'prev'"
            @click="onCustomFieldFileSwitchClick(index, 'prev')"
          >
            <i class="iconfont icon-arrow-left"></i>
          </h-plain-button>
          <div class="file-list">
            <div ref="customFiledFileContentDivs" class="content">
              <template v-if="field.type === 5">
                <h-image
                  v-for="(img, imgIndex) in field.val"
                  :key="img"
                  :src="img"
                  :preview-src-list="field.val"
                  :padding="2"
                  :show-del-btn="false"
                  :width="80"
                  :height="50"
                  :initial-index="imgIndex"
                />
              </template>

              <template v-if="field.type === 6">
                <h-image
                  v-for="(pdf, pdfIndex) in field.val"
                  :key="pdf"
                  :src="pdfImg"
                  :is-show-img-preview="false"
                  :show-del-btn="false"
                  :width="80"
                  :height="50"
                  @preview="handlePdfPreview(pdfIndex, field.val)"
                  @mask-click="handlePdfPreview(pdfIndex, field.val)"
                />
              </template>

              <template v-if="field.type === 7">
                <h-image
                  v-for="(video, videoIndex) in field.val"
                  :key="video"
                  :src="videoImg"
                  :is-show-img-preview="false"
                  :show-del-btn="false"
                  :width="80"
                  :height="50"
                  @preview="handleVideoPreview(videoIndex, field.val)"
                  @mask-click="handleVideoPreview(videoIndex, field.val)"
                />
              </template>
            </div>
          </div>
          <h-plain-button
            v-if="field.val.length >= 6"
            :height="50"
            :width="24"
            :padding-lr="1"
            :disabled="customFieldFileSwitchTypes[index] === 'next'"
            @click="onCustomFieldFileSwitchClick(index, 'next')"
          >
            <i class="iconfont icon-arrow-right"></i>
          </h-plain-button>
        </div>
      </div>
    </div>

    <pdf-preview
      v-model:visible="pdfPreviewDialogVisible"
      :initial-index="currentPdfPreviewIndex"
      :pdf-list="pdfPreviewList"
    />

    <video-preview
      v-model:visible="videoPreviewDialogVisible"
      :initial-index="currentVideoPreviewIndex"
      :video-list="videoPreviewList"
    />
  </div>
</template>

<style scoped lang="scss">
  .return-factory-detail-info {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info-list,
    .file-list-wrapper {
      padding: 0 0 0 9px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 100px;
      row-gap: 4px;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          width: 86px;
          display: flex;
          color: #606266;

          .text {
            flex: 1;
            width: 0;
            text-align: right;
            width: 83px;
            line-height: 18px;
            height: 18px;
          }

          .divider {
            width: 3px;
          }
        }

        .value {
          width: 164px;
          height: 18px;
          line-height: 18px;
        }

        .file-list-container {
          display: flex;
          column-gap: 5px;
          width: 489px;

          .file-list {
            overflow: hidden;
            flex: 1;
            width: 0;

            .content {
              width: fit-content;
              display: flex;
              column-gap: 5px;
              transition: all 0.3s ease;
            }
          }

          .pre-btn,
          .next-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #ebeef5;
            cursor: pointer;
            transition: all 0.2s ease-in;
            color: $primaryColor;
            width: 24px;

            &:hover {
              background-color: $primaryColor;
              color: #fff;
              border-color: $primaryColor;
            }
          }
        }
      }
    }
  }
</style>
